<template>
  <div class="parcelDetail">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">{{listData.express_company}}</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">收件人</span>
      <div class="list-content">
          <van-field v-if="listData.consignee_name" disabled v-model="listData.consignee_name"/>
          <van-field v-else disabled v-model="tips_name"/>
      </div>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">联系电话</span>
      <div class="list-content">
          <van-field v-if="listData.consignee_phone" disabled v-model="listData.consignee_phone"/>
          <van-field v-else disabled v-model="tips_phone"/>
      </div>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">快递单号</span>
      <div class="list-content">
          <van-field disabled v-model="listData.express_number"/>
      </div>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">所在小区</span>
      <div class="list-content">
          <van-field v-if="listData.residential_text" disabled v-model="listData.residential_text"/>
          <van-field v-else disabled v-model="tips_residential"/>
      </div>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">入库时间</span>
      <div class="list-content">
          <van-field disabled v-model="listData.create_time_text"/>
      </div>
    </div>
    <div class="parcelDetail-list">
      <span class="list-title">当前状态</span>
      <div class="list-content">
          <van-field disabled v-model="listData.status_text"/>
      </div>
    </div>

    <div v-if="listData.pay_status == 0">
      <div class="parcelDetail-list">
        <span class="list-title">取货方式</span>
        <div>
          <div class="list-content" @click="Confirmtranslate" v-if="translateValue">
            <span><img src="../../assets/images/translate.png" alt=""></span>
            <span>{{translateValue}}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="list-content" @click="Confirmtranslate" v-else>
            <span><img src="../../assets/images/translate.png" alt=""></span>
            <span>选择取货方式</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="translateId==2">
      <div class="parcelDetail-list">
        <span class="list-title">送货日期</span>
        <div>
          <div class="list-content" @click="showpPicker" v-if="time">
            <span><img src="../../assets/images/ic_tab_occasions.png" alt=""></span>
            <span>{{time}}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="list-content" @click="showpPicker" v-else>
            <span><img src="../../assets/images/ic_tab_occasions.png" alt=""></span>
            <span>选择送货日期</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="price" v-if="listData.pay_status == 0">
      <span><img src="../../assets/images/defaultIcon.png" alt=""></span>
      <span v-if="Price">服务费用:{{Price}}元</span>
      <span v-else>服务费用(选择送货方式或日期后自动计算)</span>
    </div>
    <div v-html="translateId==1?receipt:Determine"  class="submit" @click="deliver" v-if="listData.status != 1 && listData.pay_status==0"></div>
    <div v-if="listData.status != 1 && listData.pay_status>0">
    <div class="submit" @click="definedeliver">
      确认收货
    </div>
    </div>
    <div v-if="listData.status==1&&listData.pay_status>0">
      <div class="submit" @click="goparcel">
        返回
      </div>
    </div>
    <van-popup v-model="timePop" position="bottom">
      <van-datetime-picker      
        v-model="currentDate"
        type="datetime"
        @cancel="cancel"
        @confirm="confirm"
        :formatter="formatter" 
        :min-date="minDate"
      />
    </van-popup>

    <van-popup v-model="translatePop" position="bottom" >
      <van-picker
        show-toolbar
        :columns="translate"
        @cancel="translatePop=false"
        @confirm="translateFn"
      />
    </van-popup>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Field,DatetimePicker,Popup,Picker } from 'vant';
export default {
  data(){
    return{
      minDate: new Date(),
      currentDate: new Date(),
      listData:[],
      Determine:'确定',
      receipt:'确认收货',
      translate: [
        {
            text: '自提',
            id: 1
        },
        {
            text: '送货上门',
            id: 2
        }
      ],
      tips_name:'扫码支付',
      tips_phone:'无',
      tips_residential:'无',
      Price: null,
      time: null,
      translateValue:null,
      translateId:null,
      timePop:false,
      translatePop:false,
      wxData:{},
      datePicker: '',
    }
  },
  created(){
    this.request()
  },
  methods:{
    showpPicker(){
      this.timePop = true
    }, 
    Confirmtranslate(){
      this.translatePop = true
    },
    confirm(value){
      var date = value
      this.time = date.getFullYear() 
       + '-' +((date.getMonth() + 1)<=9?('0'+(date.getMonth() + 1)):(date.getMonth() + 1)) 
       + '-' + (date.getDate()<=9?('0'+date.getDate()):date.getDate()) 
       + ' ' + (date.getHours()<=9?('0'+date.getHours()):date.getHours()) 
       + ':' + (date.getMinutes()<=9?('0'+date.getMinutes()):date.getMinutes());
      this.timePop = false
      // 试算费用
      this.Cost()
    },
    translateFn(value){
      this.translateValue = value.text;
      this.translateId = value.id;
      if(value.id==1){
        this.time = null
        // 试算费用
        this.Cost()
      }
      if(value.id==2){
        this.Price = null
      }
      this.translatePop = false
    },
    // van-datetime-picker的change时间 值改变时候出发
    // change(e) {
    //   let timeArr = e.getValues() // e.getValues()打印出了选中的时间，是个数组
    //   this.time3 = `${timeArr[0]}-${timeArr[1]}-${timeArr[2]} ${timeArr[3]}:${timeArr[4]}`
    //   console.log(this.time3)
    // },
    cancel(){
      this.timePop = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }else if (type === 'month'){
        return `${value}月`
      }else if (type === 'day'){
        return `${value}日`
      }else if (type === 'hour'){
        return `${value}时`
      }else if (type === 'minute'){
        return `${value}分`
      }
      return value;
    },
    // 获取详情信息
    request(){
      this.Id = this.$route.query.id
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.parceldetail, {
        params: {
          id: this.Id
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.listData = response.data.data
          this.$toast.clear();
        }
      })
      .catch((error) => {
        console.log(error);
        this.$toast.clear();
      });
    },
    // 费用试算
    Cost(){
      this.Id = this.$route.query.id
      this.$get(api.Price, {
        params: {
          id: this.Id,
          deliver_type: this.translateId,
          deliver_time: this.time
        }
      })
      .then((response) => {
        if(response.data.code==1){
          this.Price = response.data.data.fee
        }
      })
      .catch((error) => {
        console.log(error);
      });  
    },
    // 确认提交
    deliver(){
      if(this.translateId == null){
       this.$toast('请选择取货方式')
        return
      }
      if(!this.time&&this.translateId==2){
        this.$toast('请选择送货日期');
        return
      }
      this.Id = this.$route.query.id
      var back_url=encodeURIComponent(encodeURIComponent(window.location.href));
      window.location.href =  api.parcelmode+ '?id='+this.Id+'&deliver_type='+this.translateId + '&deliver_time=' + this.time + '&back_url='+ back_url;
    },
    // 确认收货
    definedeliver(){
    this.Id = this.$route.query.id
    this.$get(api.confirm, {
        params: {
          id:this.Id,
        }
      })
      .then((response) => {
          window.location.reload();        
      })
      .catch((error) => {
        console.log(error);
      });
      // var back_url=encodeURIComponent(encodeURIComponent(window.location.href));
      // window.location.href = api.confirm+ '?id='+this.Id+'&deliver_type='+this.translateId+'&app=1'+'&back_url='+ back_url;
    },
    goback(){
      this.$router.go(-1)
    },
    goparcel(){
      this.$router.push('/parcel')
    }
  },
  components: {
    [Field.name]:Field,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [DatetimePicker.name]:DatetimePicker,
  }
}
</script>
<style>
.parcelDetail .van-icon{
  font-size: .38rem;
  color: #fff;
}
.parcelDetail .van-icon-notes-o:before{
  color: #fff;
  font-size: .5rem;
}
.parcelDetail .van-cell-group{
  background: none;
}
</style>

<style scoped>
.parcelDetail{
  padding-top: 1.2rem;
}
.list-content{
  display: flex;
  margin:.15rem .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
}
.list-content span{
  color: #000;
  width: auto;
  height: 1rem;
  line-height: 1rem;
}
.list-content span:nth-of-type(2){
  text-indent: .1rem;
  flex: 3;
}
.list-content span:nth-of-type(3){
  flex:1;
  text-align: center;
}
.list-content span img{
  margin: .28rem .15rem 0 .35rem;
  width: .4rem;
  height: .4rem;
}
.parcelDetail .parcelDetail-list{
  margin-bottom: .3rem;
}
.parcelDetail .parcelDetail-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.parcelDetail .parcelDetail-textarea .van-cell{
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #3B3564;
  border-radius: .2rem;
}
.list-title{
  display: block;
  margin:0rem .8rem;
  color: #57c5c6 ;
  font-weight: bold;
}
.minHeight{
  min-height: 3rem;
  padding: .15rem; 
}
.price{
  display: flex;
  margin: 0 .5rem;
  color: #000;
}
.price span{
  display: inline-block;
  width: auto;
}
.price span img{
  width: .5rem;
  height: .5rem;
}
.price span:nth-of-type(2){
  flex: 1;
  line-height: .55rem;
  text-indent: .2rem;
}

.submit{
  margin: .3rem .5rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}
</style>
